import { routes } from "@/config/routes";
import { Close } from "@mui/icons-material";
import { Box, IconButton, Tab, Tabs, type SxProps } from "@mui/material";
import { Outlet } from "react-router";

export default function SettingView() {
  const navigate = useNavigate();
  const location = useLocation();

  const [index, setIndex] = useState(location.pathname);

  useEffect(() => {
    setIndex(location.pathname);
  }, [location]);

  const pageHeaderStyle: SxProps = {
    display: "flex",
    width: "100%",
    justifyContent: "end",
    alignItems: "center",
    userSelect: "none",
    p: 1
  };
  return (
    <>
      <Box sx={pageHeaderStyle}>
        <IconButton onClick={() => navigate(routes.dashboard)} size="small">
          <Close fontSize="inherit" />
        </IconButton>
      </Box>
      <Box
        sx={{
          height: "100%",
          display: "flex",
          alignItems: "stretch",
          overflow: "hidden"
        }}
      >
        <Box sx={{ width: "160px", backgroundColor: "#f6f6f6", flexShrink: 0 }}>
          <Tabs
            orientation="vertical"
            sx={{ borderRight: 1, borderColor: "divider" }}
            value={index}
            onChange={(_, value) => navigate(value)}
          >
            <Tab label="Settings" value={routes.settings} />
            <Tab label="About" value={routes.about} />
          </Tabs>
        </Box>
        <Outlet />
      </Box>
    </>
  );
}
